<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*,body{
				padding: 0;
				margin: 0;
			}
			body{
				background: #323232;
			}
			.clock{
				position: relative;
				/* border: 1px solid #fff; */
				width: 200px;
				height: 200px;
				margin: 100px auto;
				border-radius: 50%;
			}
			.clock span.minute-scale{
				position: absolute;
				left: 50%;
				top:0;
				margin-left:-1px;
				display: block;
				width: 2px;
				height: 5px;
				border-radius: 2px;
				background: rgba(255,255,255,0.5);
				transform-origin:50% 100px;
			}
			.clock span.hour-scale{
				position: absolute;
				left: 50%;
				top:0;
				margin-left:-2px;
				display: block;
				width: 4px;
				height: 10px;
				border-radius: 4px;
				background: rgba(255,255,255,1);
				transform-origin:50% 100px;
			}
			.clock span.hour-num{
				position: absolute;
				left: 50%;
				top:0;
				color: #fff;
				width: 26px;
				height: 26px;
				text-align: center;
				line-height: 26px;
				margin-left:-13px;
				font-size: 14px;
				transform-origin:50% 90px;
			}
			.clock span.hour-num i{
				display: block;
				font-style: normal;
			}
			.clock .centerDot{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				width: 8px;
				height: 8px;
				border-radius: 10px;
				border: 2px solid #FFF;
				box-shadow: 0px 0px 16px rgba(29, 29, 29, 1.0);
				z-index: 2;
			}
			.clock .hand{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,5px) rotate(180deg);
				transform-origin: center -5px;
				background-color: #fff;
				transition: all .3s;
			}
			.clock .seconds-hand{
				width: 2px;
				height: 80px;
				border-bottom-left-radius: 4px;
				border-bottom-right-radius: 4px;
				box-shadow: 0px 0px 5px rgba(29, 29, 29, 0.5);
			}
			.clock .minute-hand{
				width: 4px;
				height: 60px;
				border-bottom-left-radius: 4px;
				border-bottom-right-radius: 4px;
				box-shadow: 0px 0px 4px rgba(29, 29, 29, 0.5);
			}
			.clock .hour-hand{
				width: 6px;
				height: 40px;
				border-bottom-left-radius: 6px;
				border-bottom-right-radius:6px;
				box-shadow: 0px 0px 5px rgba(29, 29, 29, 0.5);
			}
			.date-desc{
				color: #fff;
				text-align: center;
			}
			.date-desc span{
				padding-right: 10px;
			}
			.date-desc p{
				margin-bottom: 10px;
			}
		</style>
	</head>
	<body>
		<div class="clock">
			<div class="centerDot"></div>
			<div class="seconds-hand hand"></div>
			<div class="minute-hand hand"></div>
			<div class="hour-hand hand"></div>
		</div>
		<div class="date-desc">
			<p>
				<span class="date"><!-- 2020年4月21日 --></span>
				<span class="week"><!-- 周二 --></span>
			</p>
			<p>电量 100%</p>
		</div>
		<script type="text/javascript">
			window.onload=function(){
				let minuteNum = 60; // 分钟刻度
				let hourNum = 12; // 时钟刻度
				let minuteAngle = 360/minuteNum; // 分钟的角度
				let hourAngle = 360/hourNum; // 时钟的角度
				// 获取dom节点
				let clock = document.querySelector('.clock')
				let secondsHand = clock.querySelector('.seconds-hand')
				let minuteHand = clock.querySelector('.minute-hand')
				let hourHand = clock.querySelector('.hour-hand')
				let weekNode = document.querySelector('.week')
				let dateNode = document.querySelector('.date')
				// 动画结束，是否移除指针的transition
				let cancelHandAnimate = true;
				// 获取星期
				let week = getWeek()
				weekNode.innerHTML=week
				// 获取日期
				let date = getCurrentDate()
				dateNode.innerHTML = date
				// 创建分钟、时钟的刻度
				createDot()
				// 运行
				run()
				
				function run(){
					let getSeconds = 0; // 秒
					let getMinutes = 0;// 分
					let getHours = 0; //小时
					setInterval(()=>{
						let date = new Date()
						getSeconds = date.getSeconds()
						getMinutes = date.getMinutes()
						getHours = date.getHours() % 12 // 12小时值
						// console.log(getHours,getMinutes,getSeconds)
						// 设置指针的旋转样式
						secondsHand.style.transform = `translate(-50%,5px) rotate(${minuteAngle*getSeconds+180}deg)`
						minuteHand.style.transform = `translate(-50%,5px) rotate(${minuteAngle*getMinutes+180}deg)`
						// 时钟指针旋转角度需要加上当前分钟数在一小时刻度的内的角度=(hourAngle/minuteNum)*getMinutes
						hourHand.style.transform = `translate(-50%,5px) rotate(${hourAngle*getHours+(hourAngle/minuteNum)*getMinutes+180}deg)`
						if(cancelHandAnimate){
							// 动画结束，移除指针的transition
							cancelHandAnimate = false;
							setTimeout(()=>{
								secondsHand.style.transition=minuteHand.style.transition=hourHand.style.transition="none"
							},300)
						}
					},1000)
					
				}
				function createDot(){
					let fragment = document.createDocumentFragment()
					let dot = null;
					// 创建分钟刻度
					for(var i=0;i<minuteNum;i++){
						dot = document.createElement('span')
						dot.classList.add('minute-scale')
						dot.style.transform = `rotate(${minuteAngle*i}deg)`
						fragment.appendChild(dot)
					}
					// 创建时钟刻度
					for(var i=0;i<hourNum;i++){
						dot = document.createElement('span')
						dot.classList.add('hour-scale')
						dot.style.transform = `rotate(${hourAngle*i}deg)`
						fragment.appendChild(dot)
					}
					for(var i=0;i<12;i++){
						dot = document.createElement('span')
						dot.innerHTML = `<i class="num">${i+1}</i>`
						dot.classList.add('hour-num')
						dot.style.transform = `translate(0,10px) rotate(${hourAngle*(i+1)}deg)`
						let num = dot.querySelector('.num')
						num.style.transform = `rotate(-${hourAngle*(i+1)}deg)`
						fragment.appendChild(dot)
					}
					clock.appendChild(fragment)
				}
				// 获取周
				function getWeek(){
					let weekNum = ['日','一','二','三','四','五','六',]
					let date = new Date()
					let week = date.getDay();
					return '周'+weekNum[week]
				}
				// 获取日期
				function getCurrentDate(){
					let date = new Date()
					let year = date.getFullYear()
					let month = date.getMonth()+1
					let day = date.getDate()
					console.log(year,month,day)
					return `${year}年${month}月${day}日`
				}
				
			}
		</script>
	</body>
</html>
